<!-- 入库单 -->
<template>
  <view class="warehouseWarrant">
    <view class="top">
      <view>
        <van-cell-group>
          <van-field
            :value="form.purchaseinfo.purchase_sn_detail"
            label="入库编号："
            readonly
          ></van-field>
          <view v-if="toggle">
            <van-field
              :value="form.purchaseinfo.apply_time"
              label="入库日期："
              readonly
            ></van-field>
            <view class="supplier disFlex">
              <view class="supplier-laber flexAI">供货单位：</view>
              <view class="supplier-name disFlex flexWrap">{{ form.purchaseinfo.supplier_name }}</view>
            </view>
            <van-field
              :value="form.purchaseinfo.applyname"
              label="申请人签名："
              readonly
            ></van-field>
            <van-field
              :value="form.purchaseinfo.backup_goods_signature"
              label="备货签名："
              readonly
            ></van-field>
            <van-field
              :value="form.purchaseinfo.warehousing_name"
              label="库管员签名："
              readonly
            ></van-field>
          </view>
        </van-cell-group>
      </view>
      <view class="pack_up flexc mt20" @click="toggleCollapse">
        <text>{{ toggle ? "收起" : "展开" }}</text>
        <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
      </view>
    </view>
    <view class="content mt20" v-if="order_type == '0'">
      <view class="title flexb f26">
        <view class="title_left f26">
          共<text>{{ form.purchasegoodsinfo.length }}</text>件商品
        </view>
        <view class="title_right">
          合计：
          <text >￥{{ form.purchasegoodsinfo.reduce((prev, item) => prev * 1 + item.total_money * 1,0 ) | number_format(2) }}</text>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item f28 mb20" v-for="(item, index) in form.purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view class="quantity">
              <text>数量：</text>{{ item.goods_num }}{{ item.unit_name }}
            </view>
          </view>
          <view class="time_box flexb">
            <view> 生产日期：{{ item.productiontime }} </view>
            <view> 保质期（天）：{{ item.assurancetime }} </view>
          </view>
          <view class="locations_unitrice-box flexb">
            <view> 产地：{{ item.address }} </view>
            <view class="unit_price">
              单价 ：<text>￥ {{ item.goods_price }}</text>
            </view>
          </view>
          <view class="details_subtotal-box flexb">
            <view class="details f28" @click="details(item)">详情 </view>
            <view class="subtotal f28 tc fwbold"> 小计:<text>￥{{ item.total_money }}</text></view >
          </view>
        </view>
      </view>
    </view>
    <view class="content mt20" v-else>
      <view class="title flexb f26">
        <view class="title_left f26">
          共<text>{{ form.purchasegoodsinfo.length }}</text>件商品
        </view>
        <view class="title_right">
          合计：<text >￥{{ form.purchasegoodsinfo.reduce((prev, item) => prev * 1 + item.total_money * 1, 0 ) | number_format(2) }}</text>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item f28 mb20" v-for="(item, index) in form.purchasegoodsinfo" :key="index" >
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view class="quantity">
              <text>数量：</text>{{ item.goods_num }} {{ item.unit_name }}
            </view>
          </view>
          <view class="time_box flexb">
            <view> 生产日期：{{ item.productiontime }} </view>
            <view> 保质期（天）：{{ item.assurancetime }} </view>
          </view>
          <view class="locations_unitrice-box flexb">
            <view> 产地：{{ item.address }} </view>
            <view class="unit_price">
              单价 ：<text>￥ {{ item.shop_price }}</text>
            </view>
          </view>
          <view class="details_subtotal-box flexb">
            <view class="details f28" @click="details(item)">详情 </view>
            <view class="subtotal f28 tc fwbold"> 小计:<text>￥{{ item.total_money }}</text></view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn_style flexJC">
      <van-button type="default" @click="goBack">返回</van-button>
    </view>

    <!-- 详情弹框 -->
    <van-overlay :show="detailsShow">
      <view class="wrapper flexc">
        <view class="block f28">
          <view class="title flexb f32">
            <view> 详情 </view>
            <view class="icon" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" />
            </view>
          </view>
          <van-cell-group v-if="detailForm.order_type == '0'">
            <van-field
              :value="detailForm.goods_name"
              label="名称："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.unit_name"
              label="单位："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.goods_price"
              label="单价"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.goods_num"
              label="数量："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.address"
              label="产地："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.assurancetime"
              label="保质期（天）："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.productiontime"
              label="生产日期："
              readonly
            ></van-field>
            <view class="upload">
              <van-field
                :value="detailForm.filesrc"
                name="filesrc"
                data-name="filesrc"
                readonly
                label="检测报告："
              >
                <view slot="input">
                  <van-uploader
                    :deletable="false"
                    :fileList="fileList"
                    @after-read="afterRead"
                    max-count="1"
                  />
                </view>
              </van-field>
            </view>
            <van-field
              :value="detailForm.total_money"
              label="小计："
              readonly
            ></van-field>
          </van-cell-group>
          <van-cell-group v-else>
            <van-field
              :value="detailForm.goods_name"
              label="名称："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.unit_name"
              label="单位："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.shop_price"
              label="单价"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.use_type_name"
              label="使用类型："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.goods_num"
              label="数量："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.address"
              label="产地："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.assurancetime"
              label="保质期（天）："
              readonly
            ></van-field>
            <van-field
              :value="detailForm.productiontime"
              label="生产日期："
            ></van-field>
            <view class="upload">
              <van-field
                :value="detailForm.filesrc"
                name="filesrc"
                data-name="filesrc"
                readonly
                label="检测报告："
              >
                <view slot="input">
                  <van-uploader
                    :deletable="false"
                    :fileList="fileList"
                    max-count="1"
                  />
                </view>
              </van-field>
            </view>
            <van-field
              :value="detailForm.total_money"
              label="小计："
              readonly
            ></van-field>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      fileList: [],
      order_type: "",
      purchase_sn_detail: "",
      form: {
        purchaseinfo: {}, //订单信息
        purchasegoodsinfo: [], //商品信息
        purchasemenuinfo: [],
      },

      detailsShow: false,
      detailForm: {
        order_type: "",
      },
      toggle: false,
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    this.purchase_sn_detail = options.purchase_sn_detail;
    if (this.purchase_sn_detail) {
      this.getWarehousedetail(this.purchase_sn_detail);
    }
  },
  methods: {
    /*文件上传*/
    afterRead(event) {
      const { file } = event.detail;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      wx.uploadFile({
        url: this.API + "/api/purchasemanage/upload", // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: "file",
        formData: { file: "file" },
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          console.log(JSON.parse(res.data).data);
          this.fileList.push({
            ...file,
            url: JSON.parse(res.data).data.fullurl,
            isImage: true,
            // deletable: true
          });
          this.$set(this.addForm, "filesrc", JSON.parse(res.data).data.url); // 上传相对地址或者 绝对地址 ，后期可能需要改
        },
      });
    },
    startUploadFile() {
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          console.log(res);
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths[0];
          wx.uploadFile({
            url: this.API + "/api/purchasemanage/upload", //仅为示例，非真实的接口地址
            filePath: tempFilePaths,
            name: "file",
            formData: {
              user: "test",
            },
            success: (res) => {
              console.log(res);
              //do something
            },
          });
        },
      });
    },
    /*获取页面数据*/
    async getWarehousedetail(purchase_sn_detail) {
      let res = await this.$ajax.onWarehousedetail({
        purchase_sn_detail: purchase_sn_detail,
      });
      if (res.code == 1) {
        this.form.purchaseinfo = res.data.purchaseinfo;
        this.order_type = res.data.purchaseinfo.order_type;
        this.form.purchasegoodsinfo = res.data.purchasegoodsinfo;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*关闭*/
    offShow() {
      this.detailsShow = false;
    },
    /*详情*/
    details(item) {
      this.detailForm = item;
      this.detailForm.order_type = item.order_type;
      this.detailsShow = true;
      if (this.detailForm.filesrc) {
        this.fileList.push({
          // url: this.BaseURL + this.detailForm.filesrc, //拼接
          url: this.detailForm.filesrc,

          isImage: true,
        });
      }
    },
    /*返回*/
    goBack() {
      uni.navigateTo({
        url: "../purchaseOrder/purchaseOrder",
      });
    },
    /*展开收起*/
    toggleCollapse() {
      console.log("展开收起");
      this.toggle = !this.toggle;
    },
  },

  mounted() {},

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "入库单",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>
  
<style lang="scss">
// 供应商
.supplier {
  // display: flex;
  padding-left: 4%;
  line-height: 80rpx;
  .supplier-laber {
    width: 27%;
    // display: flex;
    // align-items: center;
    text-align: left;
  }
  .supplier-name {
    // display: flex;
    // flex-wrap: wrap;
  }
}
/*检测报告*/
.upload {
  //   height: 160rpx;

  .van-field__body {
    height: 180rpx;
  }
}
.warehouseWarrant {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 100rpx;

  .top {
    background: #ffffff;
    padding-bottom: 20rpx;

    .conditions {
    }

    .pack_up {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      // margin-top: 20rpx;
      color: #2e88ee;
    }
  }

  .content {
    margin-bottom: 50rpx;

    .title {
      // display: flex;
      // justify-content: space-between;
      padding: 10rpx 20rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
      }

      .title_right {
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
      }
    }

    .list_box {
      .list_item {
        width: 100%;
        height: 300rpx;
        line-height: 55rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        // font-size: 28rpx;
        padding: 20rpx 20rpx;
        padding-bottom: 10rpx;
        font-family: SourceHanSansSC-regular;
        margin-bottom: 20rpx;

        .list_item_title {
          // display: flex;
          // justify-content: space-between;

          .name {
            // display: flex;
            // align-items: center;
            color: rgba(16, 16, 16, 1);
            // font-size: 28rpx;
            font-family: SourceHanSansSC-bold;
            // font-weight: bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              // border-radius: 50%;
              background: rgba(98, 177, 88, 1);
              // margin-right: 10rpx;
            }
          }
        }

        .time_box {
          // display: flex;
          // justify-content: space-between;
        }

        .locations_unitrice-box {
          // display: flex;
          // justify-content: space-between;
          border-bottom: 0.5rpx solid #e7e4e4;
          padding-bottom: 20rpx;

          .unit_price {
            text {
              color: red;
            }
          }
        }

        .details_subtotal-box {
          // display: flex;
          // justify-content: space-between;
          padding-top: 20rpx;

          .details {
            color: rgba(46, 136, 238, 1);
            // font-size: 28rpx;
            font-family: SourceHanSansSC-regular;
          }

          .subtotal {
            background-color: rgba(255, 255, 255, 1);
            color: rgba(209, 35, 18, 1);
            // font-size: 28rpx;
            // text-align: center;
            font-family: Arial;
            // font-weight: bold;
          }
        }
      }
    }
  }

  .btn_style {
    // display: flex;
    // justify-content: center;

    .van-button {
      width: 180rpx;
      height: 72rpx;
      border-radius: 66rpx;
      border: 0.5rpx solid rgba(187, 187, 187, 1);
      color: rgba(102, 102, 102, 1);
      // font-size: 28rpx;
      // text-align: center;
      font-family: Microsoft Yahei;
    }
  }
}

// 弹框样式
.wrapper {
  z-index: 999;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  height: 100%;

  .block {
    width: 100%;
    // height: 900rpx;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 40rpx 20rpx;
    // font-size: 28rpx;

    .title {
      // display: flex;
      // justify-content: space-between;
      color: rgba(16, 16, 16, 1);
      // font-size: 32rpx;
      font-family: SourceHanSansSC-bold;
    }

    .van-field__label {
      width: 200rpx;
    }
  }
}
</style>